<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>交易管理</el-breadcrumb-item>
			<el-breadcrumb-item>购买交易管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-row :gutter="20">
				<el-col :span="4">
					<el-input v-model="custId" placeholder="手机号/userid"></el-input>
				</el-col>
				<!-- <el-col :span="4">
					<el-input v-model="seachlist.orderId" placeholder="借据号"></el-input>
				</el-col> -->
				<el-date-picker
				  v-model="value1"
				  type="daterange"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				  value-format="yyyy-MM-dd"
				  @change="changeDate">
				</el-date-picker>
				<el-button type="primary" @click="search">查询</el-button>
				<el-button @click="clear">清空</el-button>
				<el-button type="primary">导出</el-button>
			</el-row>
			
			
			<el-table :data="listData" border stripe>
				<el-table-column label="订单号" prop="orderId"></el-table-column>
				<el-table-column label="商品名称" prop="itemName"></el-table-column>
				<el-table-column label="商户名称" prop="shopName"></el-table-column>
				<el-table-column label="下单用户"  min-width='100px'>
					<template slot-scope="scope">
						<span style="color: #0066CC;" @click="toUser(scope.row.phone)">{{scope.row.phone}}</span>
					</template>
				</el-table-column>
				<el-table-column label="支付金额" prop="price"></el-table-column>
				<el-table-column label="支付时间" prop="payTime"></el-table-column>
				<el-table-column label="使用状态" prop="orderId"></el-table-column>
				<el-table-column label="使用记录" prop="counts"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="showLoanDialog(scope.row.orderId)" type="primary" size="mini">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			
			<!-- 分页 -->
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="pageCount"
			  :page-size="pageSize"
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="total">
			</el-pagination>
			
			<!-- 查看详情弹窗 -->
			<el-dialog
			  title="使用记录"
			  :visible.sync="LoanDialogVisible"
			  width="80%"
			  class="userDialog">
				<el-table :data="recordJson" border stripe>
					<el-table-column label="使用商户" prop="shopName"></el-table-column>
					<el-table-column label="使用时间" prop="sellTime"></el-table-column>
					<el-table-column label="使用次数" prop="counts"></el-table-column>
					<el-table-column label="剩余次数">
						<template slot-scope="scope">
							{{'剩余'+scope.row.recounts+'次'}}
						</template>
					</el-table-column>
					</el-table-column>
				</el-table>
			  <span slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="LoanDialogVisible = false">关闭</el-button>
			  </span>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				custId:'',
				listData:[],
				pageSize:20,
				pageCount:1,
				total:0,
				value1:'',
				seachlist:{'phone':'','custId':'','orderId':'','startTime':'','endTime':''},
				recordJson:[],
				LoanDialogVisible:false
			}
		},
		created() {
			this.seachlist.custId = this.$route.query.custId
			this.custId = this.$route.query.custId
			this.getList()
		},
		methods:{
			clear(){
				this.custId=''
				this.seachlist={'phone':'','custId':'','orderId':'','startTime':'','endTime':''}
			},
			async getList(){
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				 const {data:res} = await this.$http.post('/order/list',{endTime:this.seachlist.endTime,startTime:this.seachlist.startTime,orderId:this.seachlist.orderId,custId:this.seachlist.custId,phone:this.seachlist.phone,pageSize:this.pageSize,pageCount:this.pageCount})
				 // console.log(res);
				 this.listData = res.data.orderVOList
				 this.total = res.data.total
				 setTimeout(() => {
				   loading.close();
				 }, 500);
			},
			search(){
				if((/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.custId))) {
					this.seachlist.phone=this.custId
					this.seachlist.custId=''
				}else if(/\C/.test(this.custId)){
					this.seachlist.custId=this.custId
					this.seachlist.phone=''
				}else{
					this.seachlist.phone = ''
					this.seachlist.custId = ''
				} 
				this.getList()
			},
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.pageCount = val
				this.getList()
			},
			changeDate(e){
				if(e == null){
					this.seachlist.startTime = ''
					this.seachlist.endTime = ''
				}else{
					this.seachlist.startTime = e[0]
					this.seachlist.endTime = e[1]
				}
				
			},
			async showLoanDialog(orderId){
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				const {data:res} = await this.$http.post('/order/getOrderSellCount',{'id':orderId})
				this.LoanDialogVisible = true
				this.recordJson = res.data
				setTimeout(() => {
				  loading.close();
				}, 500);
			},
			toUser(phone){
				this.$router.push({path:'/user', query:{'phone': phone}})
			}
		}
	}
</script>

<style lang="less" scoped>
	.el-date-editor{
		margin-right: 10px;
	}
</style>
